<template>
  <div class="MsgList-component">
    <Empty v-if="!msgData || msgData.length == 0" :description="emptyText"
           :image="emptyImage" />
    <div v-else>
      <Cell v-for="(item, index) in barData" :key="index" :title="item.title" :icon="item.icon" clickable/>
      <SwipeCell v-for="(item, index) in msgData" :key="index">
        <Cell clickable titleStyle="margin: 0.1rem 0rem 0rem 0.5rem;"  @click="onMsgClick(item)">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #icon>
              <Image class="avatar" fit="cover" :src="item.seller.avatar" round></Image>
          </template>
          <template #label>
            <div class="msg-preview van-ellipsis">分数{{ item.epamount }} | 价格：{{item.netincome}} | 时间{{item.createTime}}</div>
          </template>
          <template #title>
            <div class="nickname van-ellipsis">{{item.seller.nickName}}({{item.seller.memberNo }})</div>
          </template>
        </Cell>
      </SwipeCell>
    </div>

  </div>
<!--  <button @click="showInfo">测试按钮</button>-->
</template>
<script setup name="MsgListComponent">
import { Cell, Image, Badge, Empty, SwipeCell, Button } from 'vant';
import {onMounted} from "vue";
const emits = defineEmits(['msgClick', 'barClick', 'msgRemove'])
const props = defineProps({
  msgMaxCount: {
    type: Number,
    default: 99,
  },
  msgData: {
    type: Array,
    default: []
  },
  barData: {
    type: Array,
    default: []
  },
  emptyText: {
    type: String,
    default: "暂无消息"
  },
  emptyImage: {
    type: String,
    defulat: "search",
  }
});

function onMsgClick(item) {
  emits('msgClick', item);
}

function onMsgRemove(item){
  emits('msgRemove', item);
}

function onBarClick(item) {
  emits('barClick', item);
}

</script>
<style lang="scss" scoped>
.MsgList-component {
  .avatar {
    width: 40px;
    height: 40px;
  }

  .nickname {
    width: 260px;
    height: 40px;
    line-height: 40px;
    font-weight: 600;
    font-size: 15px;
  }

  .msg-preview {
    font-weight: 400;
    width: 260px;
  }
}
</style>